<script setup lang="ts">
import ClassTab from '@/components/classManage/ClassTab.vue'

import { ref,onMounted } from 'vue'
import type { TabsPaneContext } from 'element-plus'
import {
    MessageBox,
    Plus,
} from '@element-plus/icons-vue'

onMounted(()=>{
  //获取数据
})


const activeName = ref('teach')//显示的页面的名字

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}//页面转变

function addFile(){
  //归档事件
}
function createClass(){
  //创建课程事件
}
const teachClass =ref( [
  {
    classId:1,
    color:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    courseName:'软件项目设计',
    teacherHead:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    teacherName:'王伟',
    courseTime:'2024秋',
    class:'2022软件5'
  },{
    classId:2,
    color:'',
    courseName:'软件设计与体系结构',
    teacherHead:'',
    teacherName:'赵娜',
    courseTime:'2024秋',
    class:'2022软件5'
  },{
    classId:1,
    color:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    courseName:'软件项目设计',
    teacherHead:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    teacherName:'王伟',
    courseTime:'2024秋',
    class:'2022软件5'
  },{
    classId:2,
    color:'',
    courseName:'软件设计与体系结构',
    teacherHead:'',
    teacherName:'赵娜',
    courseTime:'2024秋',
    class:'2022软件5'
  },{
    classId:1,
    color:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    courseName:'软件项目设计',
    teacherHead:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    teacherName:'王伟',
    courseTime:'2024秋',
    class:'2022软件5'
  },{
    classId:2,
    color:'',
    courseName:'软件设计与体系结构',
    teacherHead:'',
    teacherName:'赵娜',
    courseTime:'2024秋',
    class:'2022软件5'
  },{
    classId:1,
    color:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    courseName:'软件项目设计',
    teacherHead:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    teacherName:'王伟',
    courseTime:'2024秋',
    class:'2022软件5'
  },{
    classId:2,
    color:'',
    courseName:'软件设计与体系结构',
    teacherHead:'',
    teacherName:'赵娜',
    courseTime:'2024秋',
    class:'2022软件5'
  },
  {
    classId:1,
    color:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    courseName:'软件项目设计',
    teacherHead:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    teacherName:'王伟',
    courseTime:'2024秋',
    class:'2022软件5'
  },{
    classId:2,
    color:'',
    courseName:'软件设计与体系结构',
    teacherHead:'',
    teacherName:'赵娜',
    courseTime:'2024秋',
    class:'2022软件5'
  },{
    classId:1,
    color:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    courseName:'软件项目设计',
    teacherHead:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    teacherName:'王伟',
    courseTime:'2024秋',
    class:'2022软件5'
  },{
    classId:2,
    color:'',
    courseName:'软件设计与体系结构',
    teacherHead:'',
    teacherName:'赵娜',
    courseTime:'2024秋',
    class:'2022软件5'
  },{
    classId:1,
    color:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    courseName:'软件项目设计',
    teacherHead:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    teacherName:'王伟',
    courseTime:'2024秋',
    class:'2022软件5'
  },{
    classId:2,
    color:'',
    courseName:'软件设计与体系结构',
    teacherHead:'',
    teacherName:'赵娜',
    courseTime:'2024秋',
    class:'2022软件5'
  },{
    classId:1,
    color:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    courseName:'软件项目设计',
    teacherHead:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
    teacherName:'王伟',
    courseTime:'2024秋',
    class:'2022软件5'
  },{
    classId:2,
    color:'',
    courseName:'软件设计与体系结构',
    teacherHead:'',
    teacherName:'赵娜',
    courseTime:'2024秋',
    class:'2022软件5'
  },
  
]);

</script>

<template>
  <div style="position: relative; width: 100%; height: 100%;">
    <div style="position: relative; top: 15px; left: 70px;width:85%;height:100%">
      <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
        <el-tab-pane label="我教的课" name="teach">
          <ClassTab style="position: relative;left: 5%;width:95%;height:100%;" :classes="teachClass"/>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="buttonGroup" style="position: absolute; top: 25px; right: 30px;">
      <el-button type="text" class="button" @click="addFile">
        <el-icon><MessageBox /></el-icon>
        <span> 归档</span>
      </el-button>
      <el-button type="text" class="button" @click="createClass">
        <el-icon><Plus /></el-icon>
        <span> 创建课程</span>
      </el-button>
    </div>
  </div>
</template>
 
<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  font-size: 32px;
  font-weight: 600;
}
.button {
  font-size: 12px;
}
.buttonGroup .el-button {
  margin-left: 25px;
}
.buttonGroup .el-button:first-child {
  margin-left: 0; /* 第一个按钮不需要左边距 */
}
</style>